<template>
	<view class="content fofa poRel">
		<!-- <tabnav title="模板预览" :col="back"></tabnav>
		<view class="dis disAl disJuC coFFF foSi30 hei60 borRad10" :style="'top: calc('+tops+'px + 130rpx);'"
			style="background-color: rgba(0, 0, 0, 0.3);width: 100rpx;z-index: 9999;right: 20rpx;position: fixed;">{{arrI+1}}/{{list.length}}</view>
		<scroll-view :style="'height: calc(100vh - '+tops+'px - 90rpx);'" scroll-y="true" scroll-with-animation
			class="poRel" @scroll="rightScroll" @scrolltolower="rightScrolltolower" lower-threshold='2'>
			<view class="wid90 mar">
				<image :src="item" :id="'item' + index" class="wid100 mar-top30" mode="widthFix"
					v-for="(item , index) in list" :key="index" @click="previewImage(index)"></image>
				<view style="height: 140rpx;"></view>
			</view>
		</scroll-view>
		<view class="wid100 dis disAl bacFFF poFix box1" style="bottom: 0rpx;height: 125rpx;">
			<view class="wid90 mar dis disAl disJuB foSi35">
				<view class="hei80 dis disAl disJuC coFFF borRad10"
					:style="'background-color: '+backTwo+';color: '+back+';'" style="width: 300rpx;"
					@click="tiaozhuan('/pages/template/favoriteTemplate')">收藏模板</view>
				<view class="hei80 dis disAl disJuC coFFF borRad10" @click="tiaozhuan('/pages/login/zujian')" :style="'background-color: '+back+';'"
					style="width: 300rpx;">发起合同</view>
			</view>
		</view> -->
		<web-view @message="getMessage" :src="webViewUrl"></web-view>
	</view>
</template>

<script>
	import tabnav from "../common/tabnav/tabnav.vue"
	export default {
		components: {
			tabnav,
		},
		data() {
			return {
				aurl:this.global.url,
				back: uni.getStorageSync('back'),
				backTwo: uni.getStorageSync('backTwo'),
				id: '',
				list: [],
				arr: [],
				arrI: 0,
				tops: 0,
				pdfurl: '',
				contract: {}, //合同详情
				webViewUrl: ''
			}
		},
		onLoad(option) {
			uni.setNavigationBarColor({
			  frontColor: '#ffffff', // 导航栏标题颜色，只能是'black'或'white'
			  backgroundColor: this.back // 导航栏背景颜色
			});
			this.pdfurl = uni.getStorageSync('contract_detail')
			console.log('pdfurl=', this.pdfurl)
			var pdfUrl = uni.getStorageSync('contract_detail_pdfUrl')
			var userinfo = uni.getStorageSync('inuse_userinfo')
			var usertype = userinfo.usertype?1:2
			this.webViewUrl =
				this.aurl + `/addon/qianyu_dzq/wechatimg/h5topdf.html?pdfurl=${encodeURIComponent(pdfUrl)}&back=${encodeURIComponent(this.back)}&backTwo=${encodeURIComponent(this.backTwo)}&usertype=${encodeURIComponent(usertype)}&siteurl=${encodeURIComponent(this.aurl)}` //pdf地址添加参数
			console.log('pdfurl=', this.webViewUrl)
			this.id = ''
			this.arr = [];
			let that = this
			// this.getRectInfo()

		},

		created() {
			var that = this
			uni.getSystemInfo({
				success: (e) => {
					console.log(e)
					that.tops = e.statusBarHeight
				}
			})
		},
		methods: {
			getMessage(e){
				// console.log(e)
			},
			// 预览图片多张
			previewImage(indexImg) {
				// let photoList = photoImg.map(item => {
				// let newImg = 'data:image/jpeg;base64,' + item
				// 	return newImg;
				// }); //  这一步是为了给每一条图片数据，添加 'data:image/jpeg;base64,'。如果你的图片数据是完整的base64。此条步骤可以省略
				uni.previewImage({
					current: indexImg,
					urls: this.list
				});
			},
			// 获取与顶部之间的距离
			getRectInfo() {
				new Promise(resolve => {
					var top = 0;
					var temp = 0;
					for (var i = 0; i < this.list.length; i++) {
						var item = "#item" + i;
						let selectorQuery = uni.createSelectorQuery();
						selectorQuery.select(item).fields({
							size: true,
							rect: true
						}, data => {
							top = temp;
							temp = top + data.height;
							this.arr.push(top)
							resolve();
							// console.log(top, bottom);
						}).exec();
					}
				})
			},
			rightScrolltolower() {
				this.arrI = this.arr.length - 1
			},
			async rightScroll(e) {
				this.oldScrollTop = e.detail.scrollTop;
				if (this.arr.length == 0) {
					await this.getRectInfo();
				}
				if (e.detail.scrollTop == 0) {
					this.arrI = 0
					return;
				}
				let scrollHeight = e.detail.scrollTop + 30;
				for (let i = 1; i < this.arr.length; i++) {
					let height = this.arr[i - 1];
					let height1 = this.arr[i];
					let height2 = this.arr[i + 1];
					if (scrollHeight >= height1 && scrollHeight <= height2) {
						this.arrI = i
						return;
					}
					if (scrollHeight < height1 && scrollHeight > height) {
						this.arrI = i - 1
						return;
					}
				}
			},
			tiaozhuan(url) {
				uni.navigateTo({
					url: url
				});
			},
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #F4F3F3;
	}
</style>